<template>
  <div class="app-container">
    <table-custom
     
      type="selection"
      :loading="loading"
      :table-data="tableData"
      :table-column="tableColumn"
      :table-option="tableOption"
      :pagination="pagination"
   
      :pagination-obj="paginationObj"
      @handle-button-click="handleButtonClick"
      @handle-sort-change="handleSortChange"
      @handle-selection-change="handleSelectionChange"
      @handle-current-change="handleCurrentChange"
      @handle-size-change="handleSizeChange"
    >
      <!-- <el-table-column type="expand" width="35">
        <template slot-scope="scope">
          <div>
            <p>姓名：{{ scope.row.name }}</p>
            <p>日期：{{ scope.row.date }}</p>
            <p>
              地址：{{ scope.row.province }} {{ scope.row.address }} {{ scope.row.address }}
            </p>
            <p>邮编：{{ scope.row.zip }}</p>
          </div>
        </template>
      </el-table-column> -->

      <!-- <template v-slot:status="{ row }">
        <el-tag :type="row.status | statusFilter">
          {{ row.status | labelFilter }}
        </el-tag>
      </template> -->
      <template v-slot:status="{ row }">
        <el-tag :type="row.status | statusFilter">
          {{ row.status | labelFilter }}
        </el-tag>
      </template>
      
    </table-custom>

    
  </div>
</template>

<script>
import tableCustom from './component/index'

export default {
  components: {
    tableCustom
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '0': 'warning',
        '1': 'success',
        '2': 'danger',
        '3': 'info'
      }
      return statusMap[status]
    },
    labelFilter(val) {
      const labelMap = {
        '0': '未审核',
        '1': '审核通过',
        '2': '审核不通过',
        '3': '禁用'
      }
      return labelMap[val]
    }
  },
  data() {
    return {
      loading: false,
      tableData: [
        {
          id: 1,
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200331,
          status: '0'
        },
        {
          id: 2,
          date: '2016-05-02',
          name: '赵四',
          province: '东北',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200332,
          status: '1'
        },
        {
          id: 3,
          date: '2016-05-03',
          name: '张三疯',
          province: '武当山',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          status: '2'
        },
        {
          id: 4,
          date: '2016-05-04',
          name: '李连杰4',
          province: '新加坡',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 T',
          zip: 200334,
          status: '3'
        },
          {
          id: 5,
          date: '2016-05-04',
          name: '李连杰5',
          province: '新加坡',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 T',
          zip: 200334,
          status: '3'
        },
          {
          id: 6,
          date: '2016-05-04',
          name: '李连杰6',
          province: '新加坡',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 T',
          zip: 200334,
          status: '3'
        },
          {
          id: 7,
          date: '2016-05-04',
          name: '李连杰7',
          province: '新加坡',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 T',
          zip: 200334,
          status: '3'
        },
          {
          id: 8,
          date: '2016-05-04',
          name: '李连杰8',
          province: '新加坡',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 T',
          zip: 200334,
          status: '3'
        },
          {
          id: 9,
          date: '2016-05-04',
          name: '李连杰9',
          province: '新加坡',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 T',
          zip: 200334,
          status: '3'
        },
          {
          id: 10,
          date: '2016-05-04',
          name: '李连杰10',
          province: '新加坡',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 T',
          zip: 200334,
          status: '3'
        },
        //  {
        //   id: 11,
        //   date: '2016-05-04',
        //   name: '李连杰11',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },
        // {
        //   id: 12,
        //   date: '2016-05-04',
        //   name: '李连杰12',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 13,
        //   date: '2016-05-04',
        //   name: '李连杰13',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 14,
        //   date: '2016-05-04',
        //   name: '李连杰14',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 15,
        //   date: '2016-05-04',
        //   name: '李连杰15',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 16,
        //   date: '2016-05-04',
        //   name: '李连杰16',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },
        // {
        //   id: 17,
        //   date: '2016-05-04',
        //   name: '李连杰17',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 18,
        //   date: '2016-05-04',
        //   name: '李连杰18',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 19,
        //   date: '2016-05-04',
        //   name: '李连杰19',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 20,
        //   date: '2016-05-04',
        //   name: '李连杰20',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },
        // {
        //   id: 21,
        //   date: '2016-05-04',
        //   name: '李连杰21',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },{
        //   id: 22,
        //   date: '2016-05-04',
        //   name: '李连杰22',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // },
        // {
        //   id: 23,
        //   date: '2016-05-04',
        //   name: '李连杰23',
        //   province: '新加坡',
        //   city: '普陀区',
        //   address: '上海市普陀区金沙江路 1516 T',
        //   zip: 200334,
        //   status: '3'
        // }

      ],
     
      tableColumn: [
        // { label: '日期', prop: 'date', align: 'center', sortable: true },
        { label: '日期', prop: 'date', align: 'center', },
        { label: '姓名', prop: 'name' },
        { label: '省份', prop: 'province' },
        { label: '市区', prop: 'city' },
        { label: '地址', prop: 'address' },
        { label: '邮编', prop: 'zip', align: 'center', },
        {
          label: '审核状态',
          prop: 'status',
          align: 'center',
          slot: true, // 特定列是否需要slot插槽
          // filters: this.filterCondition,
          // filters: [
          //   { text: '未审核', value: '0' },
          //   { text: '审核通过', value: '1' },
          //   { text: '审核不通过', value: '2' },
          //   { text: '禁用', value: '3' }
          // ],

          // render: (row) => {
          //   console.log('rowrowrowrowrowrow')
          //    console.log(row)
          //    console.log('rowrowrow')
          //   if (row.status === '0') {
          //     return '未审核'
          //   } else if (row.status === '1') {
          //     return '审核通过'
          //   } else if (row.status === '2') {
          //     return '审核不通过'
          //   } else {
          //     return '禁用'
          //   }
          // }

        }
      ],
      tableOption: {
        label: '操作',
        fixed: 'right',
        width: '200',
        options: [
          { label: '编辑', type: 'primary', icon: 'el-icon-edit-outline', methods: 'edit' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete' }
        ]
      },
      filterCondition: [],
      pagination: true,
       pageSizes: [1, 3, 5, 8],
      // pageSizes: [],
      paginationObj: {
        total: 23,
        currentPage: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    changeLable() {
      const condition = [...new Set(this.tableData)].map((item) => {
        return { text: this.labelFilter(item.status), value: item.status }
      })
      return condition
    }
  },
  created() {
    // this.filterCondition = this.changeLable
  },
  methods: {
    labelFilter(val) {
      const labelMap = {
        '0': '未审核',
        '1': '审核通过',
        '2': '审核不通过',
        '3': '禁用'
      }
      return labelMap[val]
    },
    handleButtonClick(param) {
      console.log(param)
      this.$message({
        message: '点击操作的按钮的e',
        type: 'info'
      })
    },
    handleSortChange({ column, prop, order }) {
      this.$message({
        // message: { prop, order },
         message: '点击排序的',
        type: 'info'
      })
      // const param = Object.assign({}, { prop, order })
      // this.$emit('sort-change', param)
    },
    handleSelectionChange(val) {
      console.log(val)
      this.$message({
        // message: val,
        message: '点击全选的',
        type: 'info'
      })
    },
    handleCurrentChange(current) {
      this.$message({
        message: `当前页: ${current}`,
        type: 'info'
      })
      // this.currentPage = current
      // this.queryTable()
    },
    handleSizeChange(size) {
      this.$message({
        message: `每页 ${size} 条`,
        type: 'info'
      })
      // this.currentPage = 1
      // this.pageSize = size
      // this.queryTable()
    }
  }
}
</script>

<style  scoped>
   .app-container{
     /* background: red; */
     /* overflow: hidden; */
      /* background: red; */
   }
  
</style>

